<html>

<header>

<meta charset="utf-8"></meta>

</header>

<body>

<h2>直接使用 vue 的 私有函数_update(vnode, hydrating) 更改DOM</h2>
<br>
<p>_update 里面是调用了 __patch__函数来更新DOM的 <br> 大概是这样子 __patch__(this._vnode,this._render()) <br> this._vnode是旧的vnode _render()是生成渲染vnode的  比较变化后再作出修改DOM操作</p>
<br>
<p>__patch__函数原型为 patch(oldVnode, vnode, hydrating, removeOnly) </p>


<br>
<br>
<div id="app1" style="background-color:red">
{{msg}}
</div>

<br>
<br>


<div id="app2" style="background-color:green">
app2 占位符
</div>

<br>
<br>
<div id="test">
<input type="button" value="直接修改app1的$el" onclick="directModApp1$el()">
修改后 执行 app1.msg = "" 并不会刷新DOM了
</input>
<br>
<br>

<input type="button" value="通过 _update() 更新DOM" onclick="invokeapp1_update()">
通过 _update() 更新DOM后， 执行 app1.msg = '' 双可以刷新DOM了
</input>
<br>
<br>

<input type="button" value="通过 _update() 更新其它的DOM元素" onclick="invokeapp1_updateOther$el()">
通过 _update() 更新DOM后， 执行 app1.msg = '' 刷新渲染到其它的DOM元素, 3秒后调用app1.msg = ''测试
</input>
<br>
<br>


</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
var app1 = new Vue(
    {
        el:"#app1",
        data:{
            msg:"app1"
        }
    }
)

//var app2 = new Vue(
//    {
//        el:"#app2",
//        data:{
//            msg:"app2"
//        }
//    }
//)

function directModApp1$el(){
    app1.$el.textContent="直接修改app1的$el";
    app1.msg="看吧 响应不了修改";
    console.log("直接修改$el后， 执行 app1.msg = '' 并不会刷新DOM了");
}

function invokeapp1_update(){
    app1._vnode = app1.$el;
    app1._update(app1._render());    //里面调用了  __patch__(this._vnode,this._render())
    app1.msg="看吧 又可以响应修改了";
    console.log("通过 _update() 更新DOM后， 执行 app1.msg = '' 双可以刷新DOM了");
}

function invokeapp1_updateOther$el(){
    app2_el = document.getElementById("app2")   //获取app2 element

    app1.msg="看吧 将东西渲染到了app2了";
    app1.$el.id="oldapp1" //将id改变了 以免重复
    app1._vnode = app2_el;
    app1._update(app1._render());    //里面调用了  __patch__(this._vnode,this._render())
    
    console.log("通过 _update() 更新DOM后， 执行 app1.msg = '' 刷新渲染到其它的DOM元素");

    setTimeout('app1.msg="3秒后调用app1.msg = "',3000)
    
    setTimeout('app1.msg="但是整个 app2 原来的 DOM元素渲染成了:" + app1.$el.outerHTML ',6000)
}

</script>

</body>

</html>